<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生工程单个html页面里请求后台接口出现跨域</title>
  </head>
  <body>
    send ajax
  </body>
  <script>
    function transdata(data) {
      //在转换之前先给data添加属性t 值为时间戳
      data.t = new Date().getTime();
      //把{'userName': 'ylf','userPwd': '123456'} 形式转换成 userName=ylf&userPwd=123456形式
      var arr = [];
      for (var key in data) {
        //使用for in遍历数组
        //将属性值：属性名形式转换为属性值=属性名形式  拼接到数组后面
        arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
      }
      //使用join方法将数组转换为字符串形式 使用&作为分隔符
      return arr.join("&");
    }
    //封装ajax
    function ajax(option) {
      //定义异步对象和计时器
      var xhr, timer;
      //0 .使用自定义的transdata函数将传递过来的参数由{'userName': 'ylf','userPwd': '123456'} 形式转换成 userName=ylf&userPwd=123456形式
      var data = transdata(option.data);
      //1. 创建一个异步对象 兼容低版本ie浏览器
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2. 设置请求方式和请求地址
      if (option.type.toLowerCase() === "get") {
        //3. get设置请求方式 将需要传递的参数拼接到url后面 方便php读取
        xhr.open(option.type, option.url + "?" + data, true);
        //3. get发送请求
        xhr.send();
      } else {
        //3. 给post请求传参时open内容正常写 使用send方法传递参数
        xhr.open(option.type, option.url, true);
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        //3. post发送请求
        xhr.send(data);
      }
      //4. 监听异步对象状态变化
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          //请求完成之后停止计时器
          clearInterval(timer);
          //http状态码在200到300之间或者304时 说明网页正常响应
          if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
            //处理返回结果
            option.success(xhr);
          } else {
            //处理返回结果
            option.error(xhr);
          }
        }
      };
      //为了防止请求时间过长 我们创建一个计时器
      //判断是否传递了timeout参数
      if (option.timout) {
        timer = setInterval(function () {
          console.log("请求超时");
          //计时器到达时间之后我们停止请求 并打印请求超时
          xhr.abort();
          clearInterval(timer);
        }, option.timeout);
      }
    }

    
    // 发起请求
    ajax({
      type: "post",
      url: "http://localhost:8000/user/edit",//"https://www.baidu.com/",
      data: {
        userName: "ylf",
        userPwd: "123123",
      },
      timeout: 3000,
      success: function (xhr) {
        alert(xhr.responseText);
      },
      error: function (xhr) {
        alert("请求失败");
      },
    });
  </script>
</html>
